<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello world</title>
	<style>
		.clearfix:after{content:" ";display:block;height:0;clear:both;visibility:hidden;}
		.clearfix{ zoom:1;}
		.class-ul{
			position: relative;
		}
		.class-ul li{
			display: inline-block;
			width: 50px;
			height: 30px;
			background: #eee;
			cursor: pointer;
		}
		.class-ul li.active{
			background: #000;
			color:#fff;
		}
		.tab-cont{
			margin: 10px;
			background: #eee;
			display: none;
		}
		.tab-cont.active{
			display: block;
		}
		.last{
			height:1px;float: none;clear:both;
		}
	</style>
</head>
<body>
	<div id="d123">
		<ul class="class-ul clearfix">
			<li class="active">按钮</li>
			<li>按钮</li>
			<li>按钮</li>
			<li>按钮</li>
			<li>按钮</li>
			<li>按钮</li>
		</ul>
		<div class="cont">
			<div class="tab-cont active">1</div>
			<div class="tab-cont">2</div>
			<div class="tab-cont">3</div>
			<div class="tab-cont">4</div>
			<div class="tab-cont">5</div>
			<div class="tab-cont">6</div>
		</div>
	</div>

		<div id="box1">
		<ul class="class-ul clearfix">
			<li class="active">按钮</li>
			<li>按钮</li>
			<li>按钮</li>
			<li>按钮</li>
			<li>按钮</li>
			<li>按钮</li>
		</ul>
		<div class="cont">
			<div class="tab-cont active">1</div>
			<div class="tab-cont">2</div>
			<div class="tab-cont">3</div>
			<div class="tab-cont">4</div>
			<div class="tab-cont">5</div>
			<div class="tab-cont">6</div>
		</div>
	</div>
	<script type="text/javascript" src="jquery.js"></script>
	<script>
	(function($){
		$.fn.tab=function(a){
			var agm={
				btn:'li',
				tab:'.tab-cont',
				onClass:'active'
			};
			var o=$.extend(agm,a);
			var _this=$(this);
			var btn=_this.find(o.btn);
			var tab=_this.find(o.tab);
			btn.click(function() {
				btn.removeClass(o.onClass);
				$(this).addClass(o.onClass)
				tab.removeClass(o.onClass);
				tab.eq($(this).index()).addClass(o.onClass);
			})
		}
	})(jQuery)
	$('#d123').tab();
	$('#box1').tab();
	/*	var box=$('#d123');
		*/
	</script>
</body>
</html>